<template>
  <div class="workbench-container">
    <!-- 顶部数据卡片 -->
    <div class="data-cards-grid">
      <el-card shadow="hover" class="data-card gradient-blue">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="card-text">
            <p class="card-label">总居民数</p>
            <p class="card-value">1,024</p>
          </div>
        </div>
        <p class="card-footer">
          <i class="el-icon-top text-success"></i> 5%
          <span>较上周</span>
        </p>
      </el-card>
      <el-card shadow="hover" class="data-card gradient-green">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-document-checked"></i>
          </div>
          <div class="card-text">
            <p class="card-label">签约量</p>
            <p class="card-value">850</p>
          </div>
        </div>
        <p class="card-footer">
          <i class="el-icon-top text-success"></i> 8%
          <span>较上周</span>
        </p>
      </el-card>
      <el-card shadow="hover" class="data-card gradient-purple">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-service"></i>
          </div>
          <div class="card-text">
            <p class="card-label">服务量</p>
            <p class="card-value">1,216</p>
          </div>
        </div>
        <p class="card-footer">
          <i class="el-icon-top text-success"></i> 12%
          <span>较上周</span>
        </p>
      </el-card>
    </div>

    <!-- 主图表区 -->
    <div class="main-charts-grid">
      <!-- 近一周数据趋势 -->
      <el-card shadow="hover" class="chart-card">
        <div slot="header" class="card-header">
          <span>近一周数据概况</span>
        </div>
        <div ref="trendChart" class="chart-container"></div>
      </el-card>

      <!-- 签约量统计 -->
      <el-card shadow="hover" class="chart-card">
        <div slot="header" class="card-header">
          <span>签约量统计</span>
        </div>
        <div ref="contractChart" class="chart-container"></div>
      </el-card>
    </div>

    <!-- 底部统计与构成区 -->
    <div class="bottom-section-grid">
      <!-- 左侧: 居民标签统计 -->
      <el-card shadow="hover" class="chart-card tags-card">
        <div slot="header" class="card-header">
          <span>居民疾病标签统计</span>
        </div>
        <div class="tags-container">
          <div
              v-for="(tag, index) in tags"
              :key="index"
              class="tag-item"
          >
            <span class="tag-name">{{ tag.name }}</span>
            <div class="tag-progress">
              <div class="progress-bar" :style="{ width: tag.percentage + '%', backgroundColor: tag.color }"></div>
            </div>
            <span class="tag-count">{{ tag.count }}人</span>
          </div>
        </div>
      </el-card>

      <!-- 右侧: 居民构成饼图容器 -->
      <div class="pie-charts-wrapper">
        <el-card shadow="hover" class="chart-card pie-card">
          <div slot="header" class="card-header">
            <span>年龄构成</span>
          </div>
          <div ref="agePie" class="pie-container"></div>
        </el-card>
        <el-card shadow="hover" class="chart-card pie-card">
          <div slot="header" class="card-header">
            <span>学历构成</span>
          </div>
          <div ref="educationPie" class="pie-container"></div>
        </el-card>
        <el-card shadow="hover" class="chart-card pie-card">
          <div slot="header" class="card-header">
            <span>性别构成</span>
          </div>
          <div ref="genderPie" class="pie-container"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'WorkBench',
  data() {
    return {
      tags: [
        { name: '高血压', count: 350, percentage: 60, color: '#5470c6' },
        { name: '心脏病', count: 280, percentage: 48, color: '#91cc75' },
        { name: '糖尿病', count: 210, percentage: 36, color: '#fac858' },
        { name: '脑卒中', count: 150, percentage: 25, color: '#ee6666' },
      ],
      ageData: [
        { value: 150, name: '18岁以下' },
        { value: 280, name: '18-35岁' },
        { value: 350, name: '36-55岁' },
        { value: 244, name: '55岁以上' },
      ],
      educationData: [
        { value: 150, name: '初中及以下' },
        { value: 300, name: '高中/中专' },
        { value: 450, name: '大专/本科' },
        { value: 124, name: '硕士及以上' },
      ],
      genderData: [
        { value: 524, name: '男' },
        { value: 500, name: '女' },
      ],
      trendChart: null,
      contractChart: null,
      agePie: null,
      educationPie: null,
      genderPie: null,
    };
  },
  mounted() {
    this.initAllCharts();
    window.addEventListener('resize', this.resizeAllCharts);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeAllCharts);
  },
  methods: {
    initAllCharts() {
      this.initTrendChart();
      this.initContractChart();
      this.initPieChart('agePie', '年龄构成', this.ageData);
      this.initPieChart('educationPie', '学历构成', this.educationData);
      this.initPieChart('genderPie', '性别构成', this.genderData);
    },

    resizeAllCharts() {
      if (this.resizeTimer) clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.trendChart?.resize();
        this.contractChart?.resize();
        this.agePie?.resize();
        this.educationPie?.resize();
        this.genderPie?.resize();
      }, 200);
    },

    initTrendChart() {
      const chartDom = this.$refs.trendChart;
      if (!chartDom) return;
      this.trendChart = echarts.init(chartDom);
      const option = {
        color: ['#5470c6', '#91cc75', '#fac858'],
        tooltip: { trigger: 'axis', backgroundColor: 'rgba(50,50,50,0.7)', borderColor: '#ccc', textStyle: { color: '#fff' } },
        legend: { data: ['居民数量', '签约量', '服务量'], bottom: 10 },
        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: { type: 'value' },
        series: [
          { name: '居民数量', type: 'line', smooth: true, areaStyle: { opacity: 0.1 }, data: [120, 132, 101, 134, 90, 230, 210] },
          { name: '签约量', type: 'line', smooth: true, areaStyle: { opacity: 0.1 }, data: [80, 92, 71, 94, 70, 180, 170] },
          { name: '服务量', type: 'line', smooth: true, areaStyle: { opacity: 0.1 }, data: [150, 232, 201, 154, 190, 330, 410] },
        ],
      };
      this.trendChart.setOption(option);
    },

    initContractChart() {
      const chartDom = this.$refs.contractChart;
      if (!chartDom) return;
      this.contractChart = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: 'rgba(50,50,50,0.7)', borderColor: '#ccc', textStyle: { color: '#fff' } },
        legend: { data: ['首次签约', '续约'], bottom: 10 },
        grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
        xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        yAxis: { type: 'value' },
        series: [
          { name: '首次签约', type: 'bar', stack: '总量', barWidth: '30%', itemStyle: { color: '#5470c6' }, data: [70, 82, 71, 94, 70, 110, 120] },
          { name: '续约', type: 'bar', stack: '总量', itemStyle: { color: '#91cc75' }, data: [50, 50, 30, 40, 20, 70, 50] },
        ],
      };
      this.contractChart.setOption(option);
    },

    initPieChart(refName, title, data) {
      const chartDom = this.$refs[refName];
      if (!chartDom) return;

      const chartInstance = echarts.init(chartDom);
      const option = {
        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)', backgroundColor: 'rgba(50,50,50,0.7)', borderColor: '#ccc', textStyle: { color: '#fff' } },
        legend: { orient: 'horizontal', bottom: 10, itemWidth: 12, itemHeight: 12, textStyle: { fontSize: 13 } },
        series: [
          {
            name: title,
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold', formatter: '{b}\n{d}%' } },
            labelLine: { show: false },
            data: data,
          },
        ],
      };
      chartInstance.setOption(option);
      this[refName] = chartInstance;
    },
  },
};
</script>

<style scoped>
:root {
  --primary-color: #409eff;
  --bg-color: #f5f7fa;
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --border-color: #e4e7ed;
}

.workbench-container {
  padding: 20px;
  background-color: var(--bg-color);
  min-height: 100vh;
}

/* 栅格布局 */
.data-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.main-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.bottom-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.pie-charts-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

@media (min-width: 1200px) {
  .bottom-section-grid {
    grid-template-columns: 1fr 1.5fr;
  }
}

/* 数据卡片样式 */
.data-card {
  border: none;
  border-radius: 12px;
  color: white;
  overflow: hidden;
  transition: all 0.3s ease;
}
.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -8px rgba(0,0,0,0.2);
}

.card-content { display: flex; align-items: center; gap: 16px; }
.card-icon { font-size: 40px; opacity: 0.3; }
.card-text { text-align: left; }
.card-label { font-size: 14px; margin: 0 0 5px 0; opacity: 0.9; }
.card-value { font-size: 28px; font-weight: bold; margin: 0; }
.card-footer { margin: 12px 0 0 0; font-size: 13px; opacity: 0.9; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 10px; }
.card-footer span { margin-left: 8px; color: rgba(255, 255, 255, 0.8); }
.text-success { color: #a7f3d0; }

/* 渐变背景 */
.gradient-blue { background: linear-gradient(45deg, #409eff, #79bbff); }
.gradient-green { background: linear-gradient(45deg, #67c23a, #95d475); }
.gradient-purple { background: linear-gradient(45deg, #9b59b6, #8e44ad); }

/* 图表卡片样式 */
.chart-card {
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
}
.chart-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.card-header {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  border-left: 4px solid var(--primary-color);
  padding-left: 12px;
}
.el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f2f5;
}
.tags-card, .pie-card {
  height: 100%;
}

.chart-container { width: 100%; height: 300px; }
.pie-container { width: 100%; height: 240px; }

/* 标签统计样式 */
.tags-container { padding: 10px 0; }
.tag-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.tag-item:hover {
  background-color: #f0f2f5;
  cursor: pointer;
  transform: scale(1.02);
}
.tag-name { width: 80px; margin-right: 12px; color: var(--text-regular); }
.tag-progress { flex: 1; height: 8px; background-color: #f0f2f5; border-radius: 4px; margin-right: 12px; }
.progress-bar { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.tag-count { width: 50px; text-align: right; color: var(--text-secondary); font-weight: 500; }
</style>

